<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}

	body {
		min-width: 300px;
	}

	.left,
	.right {
		width: 100px;
		height: 100px;
		background: hotpink;
	}

	.center {
		height: 100px;
		width: 100%;
		background: yellow;
		float: left;
	}

	.left {
		position: relative;
		left: -100px;
		float: left;
		margin-left: -100%;
	}

	.right {
		position: relative;
		right: -100px;
		float: left;
		margin-left: -100px;
	}

	.clearfix {
		*zoom: 1;
	}

	.clearfix:after {
		display: block;
		content: "";
		clear: both;
	}

	#box {
		margin: 0 100px;
	}
</style>

<body>
	<div class="clearfix" id="box">
		<div class="center">
			center
		</div>
		<div class="left clearfix">
			left
		</div>
		<div class="right clearfix">
			right
		</div>
	</div>
</body>

</html>
